<template>
	<view class="content">
		<view class="text_item images">
			<img src="/static/00.jpg" class="imagesbox"/>
			<view class="title">白眉</view>
			<view class="time_type_box">
				<view class="time">18007971768</view>
			</view>
		</view>
		
		<view class="safe_li">
			<i class="coolc icon-mima"></i>
			<b>登录密码</b>
			<span>为保证您购物安全，建议您定期更改密码以保护账户安全。</span>
			<navigator url="#" class="btn">修改</navigator>
		</view>
		<view class="safe_li">
			<i class="coolc icon-shouji c2"></i>
			<b>绑定手机</b>
			<span>轻松找回密码，验证身份。已绑定：180*****768</span>
			<navigator url="#" class="btn">修改</navigator>
		</view>
		<view class="safe_li" style="border-bottom:0px;">
			<i class="coolc icon-pingjia c3"></i>
			<b>验证邮箱</b>
			<span>您验证的邮箱: se***ce@coolc.com.cn</span>
			<navigator url="#" class="btn">修改</navigator>
		</view>
		
		<view class="bingtitle">绑定登录</view>
		<view class="login_li">
			<i class="coolc icon-weixin1 c1"></i>
			<b>微信登录</b>
			<navigator url="#" class="btn">修改</navigator>
		</view>
		<view class="login_li">
			<i class="coolc icon-QQ c2"></i>
			<b>QQ登录</b>
			<navigator url="#" class="btn">修改</navigator>
		</view>
		<view class="login_li">
			<i class="coolc icon-weibo c3"></i>
			<b>新浪微博</b>
			<navigator url="#" class="btn">修改</navigator>
		</view>
		<view class="login_li">
			<i class="coolc icon-zhifubao c4"></i>
			<b>支付宝登录</b>
			<navigator url="#" class="btn">修改</navigator>
		</view>
		
	</view>
</template>

<script>
</script>

<style lang='scss'>
	page { background:$bgcolor_white; }
	.content { width:100%; height:auto; display:table; padding:26upx 32upx; }
	.safe_li {
		width:100%; height:auto; display:table; border-bottom:1px solid #eeeeee; padding:26upx 0; padding-left:120upx; position:relative;
		
		.coolc { width:90upx; height:90upx; line-height:90upx; font-size:$font-lg + 16upx; text-align:center; border-radius:60upx; display:block; background:#eb8d8f; color:$bgcolor_white; position:absolute; left:0px; top:26upx; }
		b { width:100%; display:block; font-weight:500; font-size:$font-lg; color:$font-color-333; padding-bottom:10upx; }
		span { width:100%; line-height:32upx; display:block; font-size:$font-sm; color:$font-color-ccc; padding-bottom:15upx; }
		.btn { width:110upx; height:50upx; line-height:52upx; text-align:center; background:#af0000; color:$bgcolor_white; border-radius:26upx; }
	}
	.safe_li .c2 { background:#65c8a1; }
	.safe_li .c3 { background:#6592e2; }
	
	.bingtitle { width:100%; height:140upx; line-height:60upx; padding-top:60upx; font-size:$font-lg + 4upx; border-bottom:1px solid #eeeeee; }
	.login_li {
		width:100%; height:auto; display:table; border-bottom:1px solid #eeeeee; padding:26upx 0; padding-left:120upx; position:relative;
		.coolc { width:90upx; height:90upx; line-height:90upx; font-size:$font-lg + 16upx; text-align:center; border-radius:60upx; display:block; background:#eb8d8f; color:$bgcolor_white; position:absolute; left:0px; top:26upx; }
		b { height:90upx; line-height:90upx; display:block; float:left; font-weight:500; font-size:$font-lg; color:$font-color-333; }
		.btn { width:110upx; height:50upx; line-height:52upx; text-align:center; position:absolute; top:50%; margin-top:-25upx; right:0px; background:#af0000; color:$bgcolor_white; border-radius:26upx; }
	}
	.login_li:nth-last-child(1) { border-bottom:0px; }
	.login_li .c1 { background:#44b63f; }
	.login_li .c2 { background:#4f7fdb; }
	.login_li .c3 { background:#ec3a3e; }
	.login_li .c4 { background:#3a74ff; }
	
	.text_item {
		width:100%; height:136upx; border-bottom:1px solid #eeeeee;
		&.images { padding-left:116upx; position:relative; }
		.imagesbox { width:100upx; height:100upx; position:absolute; left:0upx; top:0upx; border-radius:60upx; }
		.title { width:100%; height:52upx; line-height:32upx; padding-top:15upx; color:$font-color-333; font-size:$font-lg; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
		.time_type_box {
			width:100%; height:38upx;
			.time { display:block; float:left; font-size:$font-base; color:$font-color-999; }
		}
	}
</style>